<template>
  <div class="box">
    <div class="box-left">
      <div class="box-yq-content">
        <div class="box-yq-content-left">{{ zsjlb }}</div>
        <div class="fz12">主数据类别</div>
      </div>
      <div class="box-yq-content">
        <div class="box-yq-content-left">{{ zsjmxsl }}</div>
        <div class="fz12">主数据模型数</div>
      </div>
      <div class="box-yq-content">
        <div class="box-yq-content-left">{{ zsjbsl }}</div>
        <div class="fz12">主数据表数量</div>
      </div>
      <div class="box-yq-content">
        <div class="box-yq-content-left">{{ xfzsjxts }}</div>
        <div class="fz12">调用主数据系统数</div>
      </div>
    </div>
    <div class="box-right">
      <mbar3 :xdata="bsj"></mbar3>
    </div>
  </div>
</template>

<script setup>
import mbar3 from "./charts/mbar3.vue";
import { ref, onMounted } from "vue";
import {
  GETdataStandardSetcount3,
  GETdataStandardSetcountStandardSet,
  GETdataStandardSetgetTableMetadata,
  GETdataStandardSetcount18,
  GETdataStandardSetcount18Two,
  GETdataStandardSetgetTableMetadataTwo,
} from "@/api/DAtastandard.js";
const zsjlb = ref(0);
const zsjmxsl = ref(0);
const zsjbsl = ref(0);
const xfzsjxts = ref(0);
const bsj = ref({
  xdata: [],
  ydata: [],
  ydata2: [],
});
onMounted(() => {
  GETdataStandardSetcount3().then((res) => {
    zsjlb.value = res.data.count;
  });
  GETdataStandardSetcountStandardSet().then((res) => {
    zsjmxsl.value = res.data.count;
  });
  GETdataStandardSetgetTableMetadata().then((res) => {
    zsjbsl.value = res.data.count;
  });
  GETdataStandardSetcount18().then((res) => {
    xfzsjxts.value = res.data.count;
  });
  Promise.all([GETdataStandardSetcount18Two(), GETdataStandardSetgetTableMetadataTwo()])
    .then(([metadataRes, count18Res]) => {
      let arr = [];
      let arr2 = [];
      let arr3 = [];
      metadataRes.data.forEach((item) => {
        arr.push(item.rwName);
        arr2.push(item.name);
      });
      count18Res.data.forEach((item) => {
        arr3.push(item.column2);
      });
      bsj.value.xdata = arr;
      bsj.value.ydata = arr2;
      bsj.value.ydata2 = arr3;
    })
    .catch((err) => {
      bsj.value.xdata = ["类别一", "类别二", "类别三", "类别四"];
      bsj.value.ydata = [1, 5, 4, 8, 3];
      bsj.value.ydata2 = [2, 4, 3, 1, 3];
    });
});
</script>

<style lang="scss" scoped>
.box {
  display: flex;
}
.box-left {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 250px;
}
.box-yq-content {
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 120px;
}
.box-yq-content-left {
  width: 70px;
  height: 70px;
  text-align: center;
  line-height: 70px;
  font-size: 20px;
  background-image: url("../../../static/BGscreenLeft/yq.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.fz12 {
  font-size: 12px;
  white-space: nowrap;
}
.box-right {
  width: 410px;
}
</style>
